<template>
  <div class="wrap">
    <div class="selected-box">
      <n-grid cols="12">
        <n-gi :span="4">
          <span></span>
        </n-gi>
        <n-gi :span="4">
          <n-input-group>
            <n-input @change="onFilterChange" v-model:value="filterInput" placeholder="请输入图标名称搜索" />
            <n-button type="primary" ghost>
              搜索
            </n-button>
          </n-input-group>
        </n-gi>
      </n-grid>
    </div>
    <div class="icon-panel">
      <n-grid class="mt-5" x-gap="8" :cols="8" responsive="self">
        <n-gi v-bind:key="it.value" v-for="it of iconList" @click="onClick(it)">
          <div class="icon-box" :class="it.class==selectd?'checked':''">
            <i :class="it.class" style="font-size: 32px"></i>
            <p> {{ it.label }}</p>
          </div>
        </n-gi>
      </n-grid>
    </div>

  </div>
</template>

<script lang="ts">
import remixicon from "@/assets/remixicon/remixicon.glyph.json";
import { ref } from "vue";

export default {
  name: "index.vue",
  emits: ["onChange"],
  setup(props, ctx) {
    const filterInput = ref<String>("");
    const selectd = ref<String>("");
    const list: any = [];
    Object.keys(remixicon).forEach(it => {
      list.push({
        label: it,
        class: `ri-${it}`
      });
    });
    const iconList = ref([]);
    iconList.value = list;
    const onFilterChange = () => {
      if (filterInput.value) {
        iconList.value = list.filter((it) => {
          return it.class.indexOf(filterInput.value) > -1;
        });
      }
    };

    /**
     * 单击
     * @param it
     */
    function onClick(it: any) {
      selectd.value = it.class;
      ctx.emit("onChange", it);
    }

    const doSubmit = async () => {
      return {
        code: 200,
        msg: "选择成功",
        data: selectd.value
      };
    };
    console.log(remixicon);
    return {
      onFilterChange,
      filterInput,
      doSubmit,
      onClick,
      iconList,
      selectd
    };
  }
};
</script>

<style scoped lang="less">
.icon-box {
  border: 1px solid #cccccc;
  text-align: center;
  border-radius: 10px;
  display: block;
  margin-top: 5px;
  float: left;
  height: 100px;
  width: 100%;
  cursor: pointer;

  &:hover {
    border: 1px solid rgba(64, 158, 255, 0.87);

  }
}

.icon-box.checked {
  border: 1px solid rgba(64, 158, 255, 0.87);

}


.icon-panel {
  overflow-y: scroll;
  max-height: calc(100 - 400px)
}
</style>
